<template>
    <div class='checkin'>
        <div class="had d-flex justify-space-between">
            <div class="left">
                <p class="tle">{{ $t('message.CheckIn.a') }}</p>
                <span class="sub">{{ $t('message.CheckIn.b') }} {{ checkin.keepSignDays }} {{ $t('message.CheckIn.bb')
                }}</span>
            </div>
            <div class="right">
                <span class="sub">{{ $t('message.CheckIn.d') }}</span>
                <p class="tle text-right">{{ numberWithCommas(checkin.totalEnergy) }}</p>
            </div>
        </div>
        <div class="gord">
            <InItem v-for="item in checkin.mission.slice(0, 7)" :iniitem="item">
            </InItem>
        </div>
        <!-- <div class="btn" @click="() => checkin.toSign()">{{ $t('message.CheckIn.c') }}</div> -->
        <div class="btn" v-if="!checkin.signIn" @click="() => checkin.toSign()">{{ $t('message.CheckIn.c') }}</div>
        <div class="btn btn-in" v-if="checkin.signIn&&CDTime" >{{ $t('message.CheckIn.g') }}: {{ CDTime }} </div>
        <YNoLogin v-if="!user.isLogin"></YNoLogin>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, ref } from "vue";
import { checkin } from "./script/checkin";
import InItem from "./components/InItem.vue";
import { numberWithCommas } from "@/comm/format";
import { useUser } from "@/stores/user";
import YNoLogin from "@/components/y-nologin/index.vue";
import { post } from "@/comm/request";
import { URL_GET_DOWN } from "@/comm/api";
const user = useUser();
const timers = ref(0);
const CDTime = ref("");
let tid = 0;
onMounted(() => {
    checkin.getClocked();
    initDown()
});
function countDownGet() {
    tid = setTimeout(() => {
        timers.value -= 1;
        CDTime.value = toTime(timers.value);
        if (timers.value <= 0) {
            checkin.getClocked();
            clearInterval(tid)
        }
        else {
            countDownGet();
        }
    }, 1000)
}
function toTime(totalSeconds: number) {
    // const totalSeconds = 34353;
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    const formattedHours = String(hours).padStart(2, '0');
    const formattedMinutes = String(minutes).padStart(2, '0');
    const formattedSeconds = String(seconds).padStart(2, '0');

    const countdownFormat = `${formattedHours}h ${formattedMinutes}m ${formattedSeconds}s`;

    // console.log(countdownFormat); // 输出格式化后的倒计时时间
    return countdownFormat
}
function initDown() {
    post(URL_GET_DOWN).then((res: any) => {
        console.log(res.data, "$$$$$$$$$$$$$$$$$$$")
        timers.value = Math.floor(res.data / 1000);
        countDownGet();
    });
}
</script>

<style lang='less' scoped>
.checkin {
    max-width: 39%;
    width: 50%;
    padding-inline: 2%;
    box-sizing: content-box;
    padding-top: 24px;
    border-radius: 4px;
    // margin-top: var(--space);
    background-color: var(--card);
    position: relative;

    .gord {
        display: flex;
        justify-content: space-between;
        margin-top: 13px;
        margin-bottom: 25px;

        :deep(.in-item) {
            &:not(:first-child) {
                margin-left: 10px;
            }
        }
    }

    .btn {
        margin-inline: auto;
        width: 180px;
        height: 44px;
        background: var(--main);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -10px;
        transform: scale(0.9);

        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #333333;

        &:active {
            background: var(--main-act);
        }
    }

    .btn-in {
        width: 100%;
        // background: #1f2229;
        // color: #7c818b;
        // color: var(--win);
        background-color: transparent;
        color: var(--color);

        &:active {
            background: transparent;
        }
    }
}

.tle {
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #EAECEF;
    line-height: 25px;
}

.sub {
    font-size: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #EAECEF;
    line-height: 17px;
}
</style>